<!--
 * @Author: yangfeixiang 842931716@qq.com
 * @Date: 2022-10-08 20:46:09
 * @LastEditors: yangfeixiang 842931716@qq.com
 * @LastEditTime: 2022-10-10 10:27:35
 * @FilePath: \wework\wework\src\pages\wework\wework\batch.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div style="padding: 15px">
		<div style="background-color: #fff; padding: 15px" v-if="idshow">
			<el-tabs v-model="activeNames" class="demo-tabs" @tab-click="handleClick">
				<el-tab-pane label="潜在客户" name="first">
					<div>
						<span>
							<span>筛选：</span>
							<el-radio-group v-model="form.add_status" class="ml-4" @change="screen">
								<el-radio label="0" size="large">全部</el-radio>
								<el-radio label="3" size="large">待分配</el-radio>
								<el-radio label="1" size="large">未添加</el-radio>
								<el-radio label="4" size="large">待通过</el-radio>
								<el-radio label="2" size="large">已添加</el-radio>
							</el-radio-group>
						</span>
						<span style="float: right">
							<el-button @click="importapi"
								><el-icon><Plus /></el-icon>导入客户</el-button
							>
							<el-button @click="record"
								><el-icon><List /></el-icon>导入记录</el-button
							>
							<!-- <el-button @click="setup"
								><el-icon><Setting /></el-icon>设置</el-button
							> -->
						</span>
					</div>
					<div style="margin-top: 15px; padding: 10px; background: #fff">
						<div>
							<span> 共{{total}}个客户 </span>
							<span style="float: right">
								<span> 客户来源： </span>
								<span>
									<el-select v-model="value" class="m-2" placeholder="Select">
										<el-option label="全部" value="1" />
									</el-select>
								</span>
								<span>
									<el-input
										v-model="form.phone"
										class="w-50 m-2"
										placeholder="请输入电话后回车"
										:suffix-icon="Search"
										style="width: 200px; margin-left: 7px"
										@keyup.enter.native="userBatchListapi()"
									/>
								</span>
							</span>
						</div>
						<div style="margin-top: 15px">
							<el-table :data="tableData" style="width: 100%">
								<el-table-column prop="phone" label="电话号码" width="180" />
								<el-table-column prop="remarks" label="客户备注名" width="180" />
								<el-table-column prop="create_time" label="导入时间" />
								<el-table-column prop="type" label="客户来源">
									<template #default="scope">
										{{ scope.row.type == 1 ? '批量加好友' : '线索管理' }}
									</template>
								</el-table-column>
								<el-table-column prop="address" label="客户标签">
									<template #default="scope">
										<el-tag v-for="item in scope.row.tags" style="margin: 3px">{{ item }}</el-tag>
									</template>
								</el-table-column>
								<el-table-column prop="address" label="添加状态">
									<template #default="scope">
										{{
											scope.row.add_status == 0
												? '未添加'
												: scope.row.add_status == 1
												? '已添加'
												: scope.row.add_status == 2
												? '待分配'
												: '带通过'
										}}
									</template>
								</el-table-column>
								<el-table-column prop="add_time" label="添加时间" />
								<el-table-column prop="address" label="分配员工">
									<template #default="scope">
										<el-tag
											><el-icon><User /></el-icon>{{ scope.row.staff_name }}</el-tag
										>
									</template>
								</el-table-column>
								<el-table-column prop="size" label="分配次数" />
								<el-table-column prop="address" label="操作" width="110">
									<template #default="scope">
									<div class="app-flex-left">
										<el-button style="padding: 0;" type="primary" text v-if="scope.row.customer_id != 0" @click="showCustomerDetail(scope.row.customer_id)">详情</el-button>
										<el-button style="padding: 0;" type="primary" text v-else @click="remind(scope.row)">提醒</el-button>
										<el-button style="padding: 0;" type="primary" text @click="deletelist(scope.row)">删除</el-button>
									</div>
									</template>
								</el-table-column>
							</el-table>
						</div>
						<div style="height: 70px; padding-top: 15px">
							<el-pagination
								v-model:currentPage="form.page"
								v-model:page-size="form.size"
								:page-sizes="[10, 20, 30, 40]"
								:small="small"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								style="float: right"
							/>
						</div>
					</div>
					<el-dialog v-model="dialogVisible" title="上传表格" width="30%" :before-close="handleClose" center>
						<div>
							<div style="background-color: #f1f9ff; padding: 8px 16px">
								<div style="float: left; height: 30px; margin-top: 3px; color: #1890ff; margin-right: 3px">
									<el-icon><Bell /></el-icon>
								</div>
								<p>请下载模板后输入手机号上传，可批量复制手机号至模板内，若输入内容有重复手机号或空行将会自动过滤</p>
							</div>
							<div class="download" @click="download()">点击下载<span class="botton-text-clas">Excel模板</span></div>
							<div class="download">
								<el-form
									ref="ruleFormRef"
									:model="ruleForm"
									:rules="rules"
									label-width="95px"
									class="demo-ruleForm"
									:size="formSize"
									status-icon
								>
									<el-form-item label="选择表格：" prop="name">
										<!-- <el-upload
											v-model:file-list="fileList"
											class="upload-demo"
											action="https://qiye.3yu.top/wework/media/uploadfile"
											:headers="tokendata"
											multiple
											:on-preview="handlePreview"
											:on-remove="handleRemove"
											:before-remove="beforeRemove"
											:limit="3"
											:on-exceed="handleExceed"
										>
											<el-button
												><el-icon><Upload /></el-icon>上传表格</el-button
											>
											<template #tip> -->
												<!-- <div class="el-upload__tip">
                          jpg/png files with a size less than 500KB.
                        </div> -->
											<!-- </template>
										</el-upload> -->
										<el-upload class="avatar-uploader" action="/wework/media/uploadfile"
											:headers="{ UserToken: state.token, ContentType: 'multipart/form-data'}"
											:show-file-list="false"
											:on-success="handleAvatarSuccess"
											:before-upload="beforeAvatarUpload"
											:on-exceed="handleExceed"
											>	<div>
												<el-button size="small" >点击上传</el-button>
											</div>
											</el-upload>
											
									</el-form-item>
									<el-form-item v-if="formdata.file_name">
										<div style="width:100%"><span style="display: inline-block;width: 80%;">{{formdata.file_name}}</span><span style="float: right;" @click="deleteurl()"><el-icon><Close /></el-icon></span></div>
									</el-form-item>
									<el-form-item label="选择员工：" prop="name">
										<el-select v-model="formdata.staffs" class="m-2" multiple disabled placeholder="选择员工" style="width: 100%" @click="staffapi">
											<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id" />
										</el-select>
										<div style="font-size: 12px; color: #999">
											表格内手机号将平均分配给选择的员工，分配完成后员工会在企业微信「企微提醒」收到添加好友的任务，需要员工手动添加
										</div>
									</el-form-item>

									<el-form-item label="客户标签：">
										<!-- <el-input
											v-model="formdata.tags"
											class="w-50 m-2"
											placeholder="请选择标签"
											:suffix-icon="ArrowDownBold"
											@click="labelapi"
										/> -->
										<el-select v-model="formdata.tags" class="m-2" multiple placeholder="选择标签" style="width: 100%" @click="labelapi">
											<el-option v-for="item in tagsdata" :key="item.tag_id" :label="item.tag_name" :value="item.tag_id" />
										</el-select>
										<div style="font-size: 12px; color: #999">
											设置标签后，表格内添加成功的客户将会被自动添加选择的标签
										</div>
									</el-form-item>
								</el-form>
							</div>
						</div>
						<template #footer>
							<span class="dialog-footer">
								<el-button @click="dialogVisible = false">取消</el-button>
								<el-button type="primary" @click="importesxl()">导入</el-button>
							</span>
						</template>
					</el-dialog>
					<!-- <el-dialog
          v-model="tableselect"
          title="选择标签"
          width="40%"
          :before-close="handleClose"
          center
          >
          <div>
            <div>
              <el-input
                v-model="input1"
                class="w-50 m-2"
                placeholder="请输入要查找的标签或标签组"
                :suffix-icon="Search"
              />
            </div>
            <div>
              <div v-for="(item,i) in tabledata" >
                <div @click="showapi(i)">
                  <el-icon v-if="!item.show"><CaretRight /></el-icon><el-icon  v-if="item.show"><CaretBottom /></el-icon><span>{{item.tablename}}({{item.value.length}})</span>
                </div>
                <div v-for="items in item.value" v-if="item.show">
                  <div>{{items.name}}</div>
                </div>
              </div>
            </div>
          </div>
        </el-dialog> -->
					<el-dialog v-model="setupshow" title="设置" width="30%" :before-close="handleClose" center>
						<div>
							<el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
								<el-tab-pane label="自动提醒" name="1">
									<div style="border-bottom: 3px dashed #eee; padding-bottom: 15px">
										<span style="font-size: 14px; font-weight: 600; color: #333; margin-right: 12px"> 未分配提醒 </span>
										<span>
											<el-switch v-model="value1" />
										</span>
									</div>
									<div style="padding-bottom: 15px; margin-top: 15px">
										<span style="font-size: 14px; font-weight: 600; color: #333; margin-right: 12px"> 未跟进提醒 </span>
										<span>
											<el-switch v-model="value1" />
										</span>
									</div>
								</el-tab-pane>
								<el-tab-pane label="自动回收" name="2"
									><div style="padding-bottom: 15px; margin-top: 15px">
										<span style="font-size: 14px; font-weight: 600; color: #333; margin-right: 12px"> 未通过提醒 </span>
										<span>
											<el-switch v-model="value1" />
										</span></div
								></el-tab-pane>
								<el-tab-pane label="短信提醒" name="3">
									<div class="sms-unable">
										<img
											src="../../../assets/img/img/batch-add-user_go_open_sms.44356cf336ac.png"
											style="width: 200px"
										/>
										<p>您的短信功能未开通哦～~</p>
										<el-button style="margin-top: 15px" type="primary">开通短信功能</el-button>
										<div class="sms-open-desc">
											<div class="title">应用场景</div>
											<p style="margin-top: 7px">
												开启短信提醒后，员工点击复制手机号，将自动给客户发送一条短信，提高通过率。
											</p>
										</div>
									</div>
								</el-tab-pane>
							</el-tabs>
						</div>
						<template #footer>
							<span class="dialog-footer">
								<el-button @click="dialogVisible = false">取消</el-button>
								<el-button type="primary" @click="dialogVisible = false">保存</el-button>
							</span>
						</template>
					</el-dialog>
				</el-tab-pane>
				<el-tab-pane label="数据统计" name="second">
					<div>
						<div style="font-size: 15px; font-weight: 600; color: #333; line-height: 20px">总览</div>
						<div class="dashboard">
							<el-row :gutter="20">
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.all_count }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">导入总客户数</div>
										<div
											style="color: #409eff; font-size: 14px; margin-top: 5px; cursor: pointer"
											@click="detailsapi('0')"
										>
											详情
										</div>
									</div></el-col
								>
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.allocation_count }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">待分配客户数</div>
										<div
											style="color: #409eff; font-size: 14px; margin-top: 5px; cursor: pointer"
											@click="detailsapi('3')"
										>
											详情
										</div>
									</div></el-col
								>
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.add_count }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">待添加客户数</div>
										<div
											style="color: #409eff; font-size: 14px; margin-top: 5px; cursor: pointer"
											@click="detailsapi('1')"
										>
											详情
										</div>
									</div></el-col
								>
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.to_pass_count }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">待通过客户数</div>
										<div
											style="color: #409eff; font-size: 14px; margin-top: 5px; cursor: pointer"
											@click="detailsapi('4')"
										>
											详情
										</div>
									</div></el-col
								>
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.add_count }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">已添加总客户数</div>
										<div
											style="color: #409eff; font-size: 14px; margin-top: 5px; cursor: pointer"
											@click="detailsapi('2')"
										>
											详情
										</div>
									</div></el-col
								>
								<el-col :span="4"
									><div class="grid-content ep-bg-purple">
										<h2 style="color: color: rgba(0,0,0,.85);">{{ datavalue.performance }}</h2>
										<div style="color: rgba(0, 0, 0, 0.65); font-size: 13px; margin-top: 5px">添加完成率</div>
										<!-- <div style="color: #409EFF;font-size: 14px;margin-top: 5px;cursor:pointer; ">详情</div> -->
									</div></el-col
								>
							</el-row>
						</div>
						<div style="font-size: 15px; font-weight: 600; color: #333; line-height: 20px; margin-top: 15px">
							按成员查看
							<span style="float: right">
								<!-- <el-button type="primary">导出Excel</el-button> -->
							</span>
						</div>
						<div style="margin-top: 15px">
							<span>
								<!-- <span>
									<el-select v-model="value" class="m-2" placeholder="Select" style="width: 150px">
										<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
									</el-select>
								</span> -->
								<span style="margin-left: 5px"> 自定义： </span>
								<span>
									<el-date-picker
										v-model="formsdata.tiem"
										value-format="YYYY-MM-DD"
										type="daterange"
										unlink-panels
										range-separator="To"
										start-placeholder="开始时间"
										end-placeholder="结束时间"
										:shortcuts="shortcuts"
										:size="size"
										@change="userBatchStatisticsapi()"
									/>
								</span>
								<span style="margin-left: 5px"> 选择成员： </span>
								<span>
									<el-select
										
										v-model="formsdata.staff_ids"
										class="m-2"
										placeholder="请选择成员"
										@click="leader"
										multiple
									>
										<el-option v-for="item in leaderlistdata" :key="item.id" :label="item.name" :value="item.id" />
									</el-select>
								</span>
							</span>
							<span style="float: right; margin-top: 15px">
								<el-button @click="reset()">重置</el-button>
							</span>
						</div>
						<div>
							<el-table :data="datavalue.staff_list" style="width: 100%">
								<el-table-column prop="name" label="成员" width="180" />
								<el-table-column prop="all_count" label="分配客户总数" width="180" />

								<el-table-column prop="to_add_count" label="待添加客户数" />
								<el-table-column prop="to_pass_count" label="待通过客户数" />
								<el-table-column prop="allocation_count" label="已添加客户数" />
								<el-table-column prop="allocation_count" label="回收客户数" />
								<el-table-column prop="performance" label="添加完成率" />
								<el-table-column prop="address" label="操作">
									<template #default="scope">
										<el-button type="primary" text @click="recorddetails(scope.row)">详情</el-button>
									</template>
								</el-table-column>
							</el-table>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</div>
		<el-drawer
			v-model="drawer"
			title="I am the title"
			:with-header="false"
			style="background-color: #f4f5f7"
			size="60%"
		>
			<div>
				<div>
					<el-row :gutter="20">
						<el-col :span="16"
							><div class="grid-content ep-bg-purple" style="background-color: #fff; padding: 15px; height: 110px">
								<img style="width: 80px; border-radius: 5px; float: left" :src="drawerdata.avatar" />
								<div style="float: left; margin-left: 10px">
									<div style="font-size: 18px">{{ drawerdata.name }}</div>
								</div>
							</div></el-col
						>
						<el-col :span="8"
							><div
								class="grid-content ep-bg-purple-light"
								style="background-color: #fff; padding: 15px; height: 110px"
							>
								<div style="display: inline-block; width: 50%; text-align: center; border-right: 1px solid #eee">
									<div style="font-size: 12px; font-weight: 600; color: #8691a4; line-height: 17px">客户总数</div>
									<div>
										<span style="font-size: 32px; font-weight: 600; color: #394457; line-height: 45px">{{
											drawerdata.all_count
										}}</span
										><span style="font-weight: 400; color: #8691a4; line-height: 17px">人</span>
									</div>
								</div>
								<div style="display: inline-block; width: 50%; text-align: center">
									<div style="font-size: 12px; font-weight: 600; color: #8691a4; line-height: 17px">今日新增</div>
									<div>
										<span style="font-size: 32px; font-weight: 600; color: #394457; line-height: 45px">{{
											drawerdata.add_count
										}}</span
										><span style="font-weight: 400; color: #8691a4; line-height: 17px">人</span>
									</div>
								</div>
							</div></el-col
						>
					</el-row>
				</div>
				<div style="background-color: #fff; margin-top: 15px; padding: 10px">
					<div>
						<h3>客户列表</h3>
					</div>
					<div style="">
						<el-table :data="drawerdata.customer" style="width: 100%">
							<el-table-column prop="name" label="全部客户" width="180" />
							<el-table-column prop="name" label="标签" width="180">
								<template #default="scope">
									<el-tag v-for="item in scope.row.tags" style="margin-left: 3px">{{ item }}</el-tag>
								</template>
							</el-table-column>
							<el-table-column prop="createtime" label="添加时间" />
							<el-table-column prop="address" label="操作">
								<template #default>
									<el-button type="primary" text>聊天记录</el-button>
									<el-button type="primary" text>详情</el-button>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
		</el-drawer>
		<chooseDialogue ref="leaderdata" @getChooseData="getDialogueData($event, val)"></chooseDialogue>
		<labels ref="TestRef" :labeldataapi="labeldataapi"></labels>
		<Detail  ref="details" @diaUpdate="idshow=true"  />
	</div>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { Calendar, Search, ArrowDownBold } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRoute, useRouter } from 'vue-router'
import labels from '../../../components/app/label.vue'
import chooseDialogue from '../../../components/app/chooseDialogue.vue'
import { userBatchList, userBatchDeluser, userBatchStatistics, userBatchDetails,batchAdd,userBatchDelMissions } from '@/api'
import { useAuth } from '@/hooks'
import Detail from '../customer/detail/index.vue'
import axios from 'axios'
const { state } = useAuth()
const Route = useRoute()
const router = useRouter()
const activeName = ref('1')
const activeNames = ref('first')
const leaderdata = ref()
const drawer = ref(false)
const details = ref()
const total = ref(0)
const options = ref([])
const TestRef = ref()
const tagsdata = ref([])
const formdata =ref({
	file_url:'',
	file_name:"",
	staffs:[],
	tags:[],
	status:''
})
const idshow= ref(true)
const showCustomerDetail=(val)=>{
	idshow.value=false
	details.value.show(val)
}
const deleteurl=()=>{
	formdata.value.file_url=''
	formdata.value.file_name=''
}
const remind = (val)=>{
	ElMessageBox.confirm('是否确认提醒员工添加好友？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		userBatchDelMissions({ id: val.id }).then((res) => {
			ElMessage({
				message: '提醒成功',
				type: 'success'
			})
			userBatchListapi()
		})
	})
}
const importesxl = ()=>{
	batchAdd(formdata.value).then(res=>{
		dialogVisible.value= false
		userBatchListapi()
		ElMessage({
			message: res.msg,
			type: 'success',
		})
	})
}
const leaderlistdata = ref([])
// const beforeUpload=(file,id)=> {
//                 let fd = new FormData()
//                 fd.append('file', file)
//                 const obj = {
//                     name:'',
//                     file:''
//                 }
//                 // dataSet.fileList = []
//                 axios.post('/wework/media/uploadfile', fd, {
//                     headers: {
//                     'Content-Type': 'multipart/form-data'
//                     }
//                 }).then(res=>{
// 					console.log(res)
//                     // dataSet.addform.image = res.data.url
                    
//                     // obj.name = file.name;
//                     // obj.url = res.data.url;
//                     // dataSet.fileList.push(obj)
//                     // console.log(res);
//                 })
//             }
const tokendata = reactive({
	UserToken:state.token,
	ContentType: 'multipart/form-data'
})
const staffData = ref([])
const customershow = ref('staff')
const staffapi = ()=>{
	// chooseDialogue.value.show('staff')
	console.log(formsdata.staff_ids,'sdfsdfsdfs')
	customershow.value='staff'
	console.log(leaderdata.value,'er')
	if (leaderlistdata.value.length > 0) {
		leaderdata.value.show('staff',staffData.value)
	} else {
		leaderdata.value.show('staff',staffData.value)
	}
}
const handleAvatarSuccess = (response, uploadFile) => {
	console.log(response, uploadFile)
	formdata.value.file_name = response.data.file_name
	formdata.value.file_url = response.data.url
	// if (response.status == 'success') {
	// 	imgurl.logo = response.data
	// } else {
	// 	ElMessage.error(response.msg)
	// }
}
const file_name = ref('')
const fileList = ref([])
const handleExceed = (files, uploadFiles)=>{
	console.log(files, uploadFiles)
}
const beforeRemove = (uploadFile, uploadFiles)=>{
	console.log(uploadFile, uploadFiles)
}
const handleRemove = (file, uploadFiles)=>{
	console.log(file, uploadFiles)
	// beforeUpload(file)
}
const handlePreview = (uploadFile)=>{
	console.log(uploadFile)
}
const leader = () => {
	// if()
	customershow.value='leader'
	console.log(leaderlistdata)
	if (leaderlistdata.value.length > 0) {
		leaderdata.value.show('leader', leaderlistdata.value)
	} else {
		leaderdata.value.show('leader')
	}
}
const download=()=>{
	const elink = document.createElement('a')

	// elink.href = 'https://qiye.3yu.top/file/Excel批量添加好友模板.xlsx'
	elink.href = fileUrl.value

  elink.setAttribute('download', 'Excel批量添加好友模板')

  elink.style.display = 'none'

  document.body.appendChild(elink)

  setTimeout(() => {

    elink.click()

    document.body.removeChild(elink)

  }, 66)
}
const datavalue = reactive({
	all_count: '',
	allocation_count: '',
	add_count: '',
	to_add_count: '',
	to_pass_count: '',
	performance: '',
	staff_list: []
})
const reset = () => {
	formsdata.tiem = []
	formsdata.staff_ids = []
	userBatchStatisticsapi()
}
const getDialogueData = (val) => {
	staffData.value = val
	console.log(val)
	if(customershow.value == 'leader'){
		leaderlistdata.value = val
		var ids = []
		for (var i = 0; i < leaderlistdata.value.length; i++) {
			console.log(leaderlistdata.value[i].id)
			ids.push(leaderlistdata.value[i].id)
			// formsdata.staff_ids[i] = leaderlistdata.value[i].id
		}
		formsdata.staff_ids = ids
		userBatchStatisticsapi()
	}else{
		options.value = val
		var ids = []
		for(var i = 0;i<val.length;i++){
			ids.push(val[i].id * 1)
		}
		formdata.value.staffs=ids
		
	}
	
}
const detailsapi = (val) => {
	activeNames.value = 'first'
	form.add_status = val
	userBatchListapi()
}
const ruleForm = reactive({
	name: 'Hello'
})
const labeldataapi = (val) => {
	console.log(val)
	formdata.value.tags=val.id
	tagsdata.value=val.list
}
const form = reactive({
	page: 1,
	size: 10,
	add_status: '0',
	phone: ''
})
const tabledata = ref([
	{
		tablename: '客户等级',
		value: [
			{
				id: 1,
				name: '核心'
			},
			{
				id: 2,
				name: '重要'
			},
			{
				id: 3,
				name: '一般'
			}
		],
		check: [],
		show: true
	}
])
const rules = reactive({
	name: [
		{ required: true, message: 'Please input Activity name', trigger: 'blur' },
		{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' }
	]
})
const ruleFormRef = ref()
const tableData = ref([
	{
		date: '2016-05-03',
		name: 'Tom',
		address: 'No. 189, Grove St, Los Angeles'
	}
])
const dialogVisible = ref(false)
const importapi = () => {
	dialogVisible.value = true
}
const tableselect = ref(false)
const labelapi = () => {
	// console.log('111')
	// tableselect.value=true
	var data = {
		show: true,
		type: 2
	}
	TestRef.value.tableshow(data)
}
const showapi = (val) => {
	tabledata.value[val].show = !tabledata.value[val].show
}
const record = () => {
	router.push('record')
}
const setupshow = ref(false)
const setup = () => {
	setupshow.value = true
}
const fileUrl  = ref('')
const userBatchListapi = () => {
	userBatchList(form).then((res) => {
		total.value = res.data.count
		tableData.value = res.data.item
		fileUrl.value = res.data.excel
	})
}
const handleSizeChange = (val) => {
	form.size = val
	userBatchListapi()
}
const handleCurrentChange = (val) => {
	form.page = val
	userBatchListapi()
}
const screen = () => {
	console.log(form.add_status)
	userBatchListapi()
}
const deletelist = (val) => {
	ElMessageBox.confirm('确定要删除该条数据吗？', '提示', {
		type: 'warning',
		center: true
	}).then(() => {
		userBatchDeluser({ id: val.id }).then((res) => {
			ElMessage({
				message: '删除成功',
				type: 'success'
			})
			userBatchListapi()
		})
	})
}
const formsdata = reactive({
	tiem: [],
	staff_ids: []
})
const userBatchStatisticsapi = () => {
	userBatchStatistics(formsdata).then((res) => {
		datavalue.all_count = res.data.all_count
		datavalue.allocation_count = res.data.allocation_count
		datavalue.add_count = res.data.add_count
		datavalue.to_add_count = res.data.to_add_count
		datavalue.to_pass_count = res.data.to_pass_count
		datavalue.performance = res.data.performance
		datavalue.staff_list = res.data.staff_list
	})
}
const drawerdata = reactive({
	add_count: '',
	all_count: '',
	avatar: '',
	customer: [],
	name: '',
	id: ''
})
const recorddetails = (val) => {
	drawer.value = true
	userBatchDetails({ staffid: val.id }).then((res) => {
		drawerdata.add_count = res.data.add_count
		drawerdata.all_count = res.data.all_count
		drawerdata.avatar = res.data.avatar
		drawerdata.customer = res.data.customer
		drawerdata.name = res.data.name
		drawerdata.id = res.data.id
	})
}
userBatchStatisticsapi()
userBatchListapi()
</script>
<style lang="scss">
.el-select .el-input.is-disabled .el-input__wrapper {
    cursor: pointer;
		background: #fff;
}
.el-select .el-input.is-disabled .el-input__inner {
    cursor: pointer;
		background: #fff;
}
.el-drawer__body {
	background-color: #f4f5f7;
}
.botton-text-clas {
	color: #409eff;
	cursor: pointer;
}
.download {
	margin-top: 15px;
}
.sms-unable {
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	-webkit-box-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	flex-direction: column;
	margin-top: 34px;
	font-size: 14px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: rgba(0, 0, 0, 0.65);
	line-height: 20px;
	max-height: 300px;
	overflow-y: auto;
}
.sms-open-desc {
	width: 399px;
	height: 91px;
	background: #f9f9f9;
	border-radius: 2px;
	margin-top: 32px;
	padding: 14px 16px;
	font-size: 13px;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: var(--ame-color-text);
	line-height: 18px;
}
.title {
	font-weight: 600;
	font-size: 13px;
	display: -webkit-box;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	border-left: 3px solid #1990ff;
	padding-left: 7px;
}
.dashboard {
	background: #fbfdff;
	border: 1px solid #cfe8ff;
	padding: 31px 0 23px;
	margin-top: 16px;
	text-align: center;
}
.el-select__popper .el-popper {
	display: none !important;
}
</style>
